<template>
<div>
        <div class="my">
            <div class="carousel left">
              <el-carousel :interval="interval">
<!--                <el-carousel :interval="interval" :height="height" :style="{width: carouselWidth}">-->
                <el-carousel-item v-for="(item, index) in items" :key="index">
                  <img :src="item.src" alt="" :style="{width:item.width}">
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="newmy right">
              <div class="demo-collapse">
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item name="1">
                <template #title>
                  <div style="font-size: 20px; color: rgb(130, 170, 253); font-weight: bold;">
                    学院动态
                  </div>
                </template>
                <div>
                  <p style="color: rgb(6,160,190);font-weight: bold;">信息工程系开展相“信”有你 ，温暖“研”途慰问活动</p>
                </div>
                <div>
                  <p></p>
                </div>
                <div>
                  <p style="color: rgb(6,175,255);">2024年全国硕士研究生入学考试已进入最后的冲刺阶段，为鼓舞考研学子士气，缓解考生复习备考压力，坚定学子上岸信心，12月20日，信息工程学院在考研自习室开展相“信”有你 ，温暖“研”途慰问活动，信息工程学院院长钟才明、党委书记林聪、副院长符强、副院长杜世民、副院长陆继祥、副书记李璐、毕业班辅导员和考研学子代表参加。</p>
                </div>
              </el-collapse-item>
              <el-collapse-item name="2">
                <template #title>
                  <div style="font-size: 20px; color: rgb(130, 170, 253); font-weight: bold;">
                    媒体关注
                  </div>
                </template>
                <div>
                  <p style="color: rgb(6,160,190);font-weight: bold;">在最具幸福感的大美慈溪，在春雨中一路跑进风景</p>
                </div>
                <div>
                  <p></p>
                </div>
                <div>
                  <p style="color: rgb(6,175,255);">4月24日，由宁波市新闻办主办、宁波日报报业集团承办、2022亚运会官方空调独家供应商奥克斯空调全程支持的“千名老外、百个社区（村）迎亚运接力跑”活动慈溪站在龙山镇山下书院开跑，慈溪市委宣传部与美团骑行业务部门共同发起文明出行倡议。春雨细密，来自各行各业的跑友们以奋勇拼搏的激情，跑过千年古镇、未来社区，跑过红色片区、翠绿田野，也跑过了艺术村落、数治社区……以最特别的方式迎接杭州亚运会。
                  </p>
                </div>
              </el-collapse-item>
              <el-collapse-item name="3">
                <template #title>
                  <div style="font-size: 20px; color: rgb(130, 170, 253); font-weight: bold;">
                    通知公告
                  </div>
                </template>
                <div>
                  <p style="color: rgb(6,160,190);font-weight: bold;">信息工程学院2022-2023学年奖学金及荣誉奖推荐名单公示
                  </p>
                </div>
                <div>
                  <p></p>
                </div>
                <div>
                  <p style="color: rgb(6,175,255);">各位同学：</p>
                  <p></p>
                  <p style="color: rgb(6,175,255);">根据《宁波大学科学技术学院学生奖学金评定办法》和《宁波大学科学技术学院学生荣誉奖评选办法》，经过学生申请，学院评审，学院奖学金及荣誉奖评定结果如下（见附件）。
                  </p>
                  <p></p>

                  <p style="color: rgb(6,175,255);">现将结果予以公示，如对推荐名单有异议，请在公示期间到学工办7-424反馈，逾期不作更改。
                  </p>


                </div>

              </el-collapse-item>
              <el-collapse-item name="4">
                <template #title>
                  <div style="font-size: 20px; color: rgb(130, 170, 253); font-weight: bold;">
                    活动咨询
                  </div>
                </template>

                <div>
                  <p style="color: rgb(6,160,190);font-weight: bold;">关于举办“Web of Science数据库平台检索与利用”学术讲座与学术交流的通知
                  </p>
                </div>
                <div>
                  <p></p>
                </div>
                <div>

                  <p></p>
                  <p style="color: rgb(6,175,255);">“Web of Science数据库平台检索与利用”
                  </p>
                  <p></p>
                  <p style="color: rgb(6,175,255);">时间：2023年5月17日 14：00
                  </p>
                  <p></p>
                  <p style="color: rgb(6,175,255);">地点：图书馆507教室(机房9)
                  </p>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        <!--      折叠面板-->
            </div>

        </div>

  <div class="footleft">


    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span id="mySpan">优秀第二课堂小组推荐</span>
          </div>
          <div class="body">
            <p v-for="item in textdata" :key="item.id">{{item}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span id="mySpan">优秀内容推荐</span>
          </div>
          <div class="body">
            <p v-for="item in textcontent" :key="item.id">{{item}}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span id="mySpan">优秀课程推荐</span>
          </div>
          <div class="body">
            <p v-for="item in textclass" :key="item.id">{{item}}</p>
          </div>
        </el-card>
      </el-col>


    </el-row>
  </div>

</div>
</template>

<script>
import { listRecommendation } from "@/api/system/recommendation";
import { listNewmyclass } from "@/api/system/newmyclass";
import { listNewmycontent } from "@/api/system/newmycontent";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.2",
      interval: 3000, // 自动播放间隔时间，单位ms
      height: "300px", // 轮播图高度

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        groupName: null,
        classTheme: null,
      },
      // 查询参数
      classqueryParams: {
        pageNum: 1,
        pageSize: 10,
        newclass: null,
        mynewteacher: null,
        newstudents: null
      },
      //查询参数
      newcontentqueryParams: {
        pageNum: 1,
        pageSize: 10,
        newtheme: null,
        newcontent: null,
        newteacher: null
      },
      textdata : [
        // { id: 1, text: "111!" },
        // { id: 2, text: "222!!" },
        // { id: 3, text: "333!!!" },
        // { id: 4, text: "444!!!!" }
      ],
      textclass :[],
      textcontent :[],

      items: [
        {
          src:require("@/assets/images/image1.jpg"),
          width:'759px',
          height:'410px'
        },
        {
          src:require("@/assets/images/image2.jpg"),
          width:'759px',
          height:'410px'
        },
        {
          src:require("@/assets/images/image3.jpg"),
          width:'759px',
          height:'350px'
        }


        // require("./assets/images/image1.jpg"),
        // require("./assets/images/image2.jpg"),
        // require("./assets/images/image3.jpg")


      ], // 轮播图图片数组
      carouselWidth: "600px" // 修改为你想要的宽度
    };
  },
  mounted(){
    this.getData()
    this.getClassData()
    this.getContentData()
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    getData(){
      listRecommendation(this.queryParams).then(response =>{

        this.textdata = response.rows.map(item => item.groupName);

      })
    },
    getContentData(){
      listNewmycontent(this.newcontentqueryParams).then(response =>{

        this.textcontent = response.rows.map(item => item.newcontent);
      })
    },
    getClassData(){
      listNewmyclass(this.classqueryParams).then(response =>{

        this.textclass = response.rows.map(item => item.newclass);
      })
    }

  },
};



</script>

<style scoped lang="scss">
//.home {
//  blockquote {
//    padding: 10px 20px;
//    margin: 0 0 20px;
//    font-size: 17.5px;
//    border-left: 5px solid #eee;
//  }
//  hr {
//    margin-top: 20px;
//    margin-bottom: 20px;
//    border: 0;
//    border-top: 1px solid #eee;
//  }
//  .col-item {
//    margin-bottom: 20px;
//  }
//
//  ul {
//    padding: 0;
//    margin: 0;
//  }
//
//  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
//  font-size: 13px;
//  color: #676a6c;
//  overflow-x: hidden;
//
//  ul {
//    list-style-type: none;
//  }
//
//  h4 {
//    margin-top: 0px;
//  }
//
//  h2 {
//    margin-top: 10px;
//    font-size: 26px;
//    font-weight: 100;
//  }
//
//  p {
//    margin-top: 10px;
//
//    b {
//      font-weight: 700;
//    }
//  }
//
//  .update-log {
//    ol {
//      display: block;
//      list-style-type: decimal;
//      margin-block-start: 1em;
//      margin-block-end: 1em;
//      margin-inline-start: 0;
//      margin-inline-end: 0;
//      padding-inline-start: 40px;
//    }
//  }
.my {
  display: flex;
  //justify-content: flex-start; /* 修改为 flex-start */
  //align-items: flex-start; /* 修改为 flex-start */
  margin-left: 10px;
  margin-top: 20px;
}

.carousel.left {
  flex-grow: 1;
  margin-right: 10px; /* 调整走马灯容器的右边距 */
  width: 50%;
}

.newmy.right {
  width: 50%; /* 设置折叠面板的宽度 */
  margin-left: 10px; /* 调整折叠面板容器的左边距 */

}
.footleft{
  margin-top: 40px;
  margin-left: 10px;
  margin-right: 10px;
}
.home{
  overflow-x: hidden;
}
#mySpan {
  font-size: 20px; /* 设置字体大小为20像素 */
  color: rgb(130, 170, 253); /* 设置字体颜色为红色 */
  font-weight: bold; /* 设置字体加粗 */
  /* 在这里可以添加其他样式属性，如字体类型、背景颜色等 */
}

//}
</style>

